긴 문장을 특정 줄 수까지만 표시하기

✒️ 2025-05-16 12:36 내용 수정

• 요소 내의 글이 너무 길 때 글이 박스를 넘어가거나 너비가 100% 등으로 설정되어 요소 높이가 끝없이 늘어나는 경우가 있다.
• 이럴 때 문장을 끊어 줄임 표시로 적절하게 처리할 수 있다.
• 프로젝트에서 워낙 자주 쓰는 스타일이라 까먹지 않기 위해 간략하게 정리했다.

<p id="content">
	Morbi sollicitudin cursus consequat. Maecenas commodo nunc ligula, et accumsan augue lobortis in. Sed sapien arcu, vehicula non euismod eu, suscipit sed sapien. Morbi maximus maximus sapien, nec pellentesque augue elementum eu. Curabitur arcu odio, facilisis vestibulum rhoncus sit amet, laoreet non enim. Nulla egestas euismod dui. Suspendisse quis orci neque.
</p>

• 대상 요소에서 아래 속성들을 추가하면 이미지처럼 문장이 특정 줄 수까지만 나오고, 그를 초과하는 분량은 줄임 표시로 나온다.

#content {
	/* 옛날 flexbox 형식 */
    display: -webkit-box;
    /* 줄 수 제한 */
    -webkit-line-clamp: 7; 
    /* 세로 방향 줄 맞춤 */
    -webkit-box-orient: vertical;

	/* 부모 요소를 넘어가면 숨김 */
    overflow: hidden;
    /* ... 표시 */
    text-overflow: ellipsis;
    /* 길어지는 요소의 강제 줄바꿈 */
    word-wrap: break-word;
}

• 최근에는 overflow-wrap: break-word로 작성하는 것을 권장하고 있다.
  • 참고 자료 : mdn web docs overflow-wrap

overflow-wrap: break-word